<template>
  <view class="mxp-list" :class="cusClass" :style="[{ padding: listPadding, background }, cusStyle]">
    <mxp-line v-if="listBorderColor !== false" :color="listBorderColor"></mxp-line>
    <slot></slot>
  </view>
</template>

<script lang="ts" setup>
  import { publicStyeProps } from '../mxp-tool/utils/public-props';
  import { type CSSProperties, type PropType, computed, onBeforeMount, onUnmounted, provide, watch } from 'vue';
  import type { $AllColorStr, $SizeUnitArr4Str, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import MxpLine from '@/mxp-ui/mxp-line/mxp-line.vue';
  import { getOnlyID } from '../mxp-tool/utils/common';
  import { type ListID, type MxpListProps, listInjectKey, mxpListStore } from '../mxp-tool/store/mxp-store-list';
  defineOptions({
    name: 'mxp-list',
  });
  const props = defineProps({
    /** 背景色 */
    background: { type: String as PropType<$AllColorStr>, default: undefined },
    /** list顶部边框颜色 */
    listBorderColor: { type: [Boolean, String] as PropType<$AllColorStr | boolean>, default: false },
    /** list四周边距 */
    listPadding: { type: String as PropType<$SizeUnitArr4Str>, default: '0px 0px' },
    /** 最小高度 */
    itemMinHeight: { type: String as PropType<$SizeUnitStr>, default: undefined },
    /** Padding 默认 '4px 15px' */
    itemPadding: { type: String as PropType<$SizeUnitArr4Str>, default: undefined },
    /** 是否显示箭头 */
    itemArrow: { type: Boolean, default: undefined },
    /** 箭头大小  */
    itemArrowSize: { type: String as PropType<$SizeUnitStr>, default: undefined },
    /** 箭头颜色 */
    itemArrowColor: { type: String as PropType<$AllColorStr>, default: undefined },
    /** 是否有点击效果 */
    itemHover: { type: Boolean, default: undefined },
    /** 是否禁止点击 */
    itemDisabled: { type: Boolean, default: undefined },
    /** 边框颜色 */
    itemBorderColor: { type: [Boolean, String] as PropType<$AllColorStr | boolean>, default: undefined },
    /** 整个 item 的样式 */
    itemStyle: { type: Object as PropType<CSSProperties>, default: undefined },
    /** 内容容器的样式 */
    itemContentViewStyle: { type: Object as PropType<CSSProperties>, default: undefined },
    /** 底部边框样式 */
    itemLineStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
    ...publicStyeProps,
  });

  defineSlots<{
    /** 自定义内容 */
    default: () => void;
  }>();

  const id: ListID = `__MXP-LIST-${getOnlyID('mxp-list')}__`;

  const listStore = mxpListStore();

  const listProps = computed<MxpListProps>(() => {
    const _formProps: MxpListProps = {
      itemMinHeight: props.itemMinHeight,
      itemPadding: props.itemPadding,
      itemArrow: props.itemArrow,
      itemArrowSize: props.itemArrowSize,
      itemArrowColor: props.itemArrowColor,
      itemHover: props.itemHover,
      itemDisabled: props.itemDisabled,
      itemBorderColor: props.itemBorderColor,
      itemStyle: props.itemStyle,
      itemContentViewStyle: props.itemContentViewStyle,
      itemLineStyle: props.itemLineStyle,
    };
    return _formProps;
  });
  watch(
    () => listProps.value,
    (val) => {
      listStore.actions.setListProps(id, val);
    }
  );

  listStore.actions.setListProps(id, listProps.value);

  provide<ListID>(listInjectKey, id);
  onBeforeMount(() => {
    provide<ListID>(listInjectKey, id);
  });

  onUnmounted(() => {
    // 删除
    listStore.actions.delItemByID(id);
  });
</script>

<style lang="scss" scoped>
  .mxp-list {
    box-sizing: border-box;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
</style>
